<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<style>
	html, body {
		font-family: -apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
		width:100%;
	}
	body{
		max-width:7.5rem;
		margin:0 auto;
	}
	.main{width:100%;}
	.article{padding:10px;font-size:0.3rem;overflow:hidden;}
	img,video,embed,iframe{max-width:100% !important;}
	</style>
	<script>
	function adapt(designWidth, rem2px){
	  var d = window.document.createElement('div');
	  d.style.width = '1rem';
	  d.style.display = "none";
	  var head = window.document.getElementsByTagName('head')[0];
	  head.appendChild(d);
	  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
	  d.remove();
	  var w=window.innerWidth>750?750:window.innerWidth;
	  document.documentElement.style.fontSize = w / designWidth * rem2px / defaultFontSize * 100 + '%';
	  var st = document.createElement('style');
	  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
	  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
	  st.innerHTML = portrait + landscape;
	  head.appendChild(st);
	  return defaultFontSize
	};
	var defaultFontSize = adapt(750, 100);
	</script>
</head>
<body>
	<div class="main">
		<div class="article" id="article">
			{{ content }}
		</div>
	</div>
	<script>
		document.body.style.height=document.getElementById("article").height+"px";
		window.onload=function(){
			var imgs=document.getElementsByTagName("img");
			for(var i=0;i<imgs.length;i++){
				imgs[i].style.maxWidth="100%";
			}
		}
	</script>
</body>
